<template>
  <div class="app-container">

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
          v-hasPermi="['eam:h:add']">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
        >导出</el-button>
       </el-col>
      <el-input placeholder="单号" clearable style="width: 240px;" size="mini" @keyup.enter.native=""
        v-model="queryParams.alterationOdd" /> &nbsp;&nbsp;
      <el-button type="primary" icon="el-icon-search" size="mini" @click="" @click="getList()">查询</el-button>
    </el-row>

    <el-table v-loading="loading" :data="hList" @selection-change="handleSelectionChange" border>
      <el-table-column label="序号" align="center" prop="alterationId" :min-width="30">
        <template slot-scope="scope">
          {{scope.$index + 1}}
        </template>
      </el-table-column>
      <el-table-column label="单据状态" align="center" key="receiptsStatus" prop="receiptsStatus" :min-width="58">
        <template slot-scope="scope">
          <button class="but1" v-if="scope.row.receiptsStatus == 3">待审核</button>
          <button class="but2" v-if="scope.row.receiptsStatus == 2">已拒绝</button>
          <button class="but3" v-if="scope.row.receiptsStatus == 1">已审核</button>
          <button class="but4" v-if="scope.row.receiptsStatus == 4">已撤销</button>
        </template>
      </el-table-column>

      <el-table-column label="变更单号" align="center" key="alterationOdd" prop="stockcode" :min-width="130">
        <template slot-scope="scope">
          <span style="font-size: 12px;">{{scope.row.alterationOdd}}</span>
          <img @click="flow(scope.row)" class="img2" src="../../assets/image/单据流水.png" />
        </template>
      </el-table-column>

      <el-table-column label="变更内容" align="center" prop="alteraContent" :min-width="120">
        <template slot-scope="scope">
          <span style="font-size: 11px;">{{scope.row.alteraContent}}</span>
        </template>
      </el-table-column>

      <el-table-column label="资产类型" align="center" prop="typeName" />
      <el-table-column label="制单人" align="center" prop="preparedName" :min-width="55" />
      <el-table-column label="制单时间" align="center" prop="preparedDate" min-width="100"/>
      <el-table-column label="备注" align="center" prop="remark" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" :min-width="100">
        <template slot-scope="scope">
          <el-button style="font-size: 11px;" type="text" @click="opneAudit(scope.row)" v-hasPermi="['eam:h:edit']"
            :disabled="scope.row.receiptsStatus != 3 || roles == 'common'">审核</el-button>
          <el-button style="font-size: 11px;" type="text" @click="hadReturn(scope.row)" v-hasPermi="['eam:h:remove']"
            :disabled="scope.row.receiptsStatus != 1">撤回</el-button>
          <el-button style="font-size: 11px;" type="text" @click="handleUpdate(scope.row)"
            v-hasPermi="['eam:h:remove']">修改</el-button>
          <el-button style="font-size: 11px;" type="text" @click="handleDelete(scope.row)"
            v-hasPermi="['eam:h:remove']">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />

    <!-- 变更或修改入库配置对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body style="margin-left: 80px;">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="资产类型" prop="assetType">
              <el-select v-model="form.assetType">
                <el-option v-for="item in typeList" :key="item.typeId" :label="item.typeName"
                  :value="item.typeId"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="存放位置" prop="locationId">
              <el-select v-model="form.locationId">
                <el-option v-for="item in locationList" :key="item.locationId" :label="item.locationName"
                  :value="item.locationId"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="使用部门" prop="useDept">
              <el-select v-model="form.useDept" @change="queryUsePerson">
                <el-option v-for="item in deptList" :key="item.deptId" :label="item.deptName"
                  :value="item.deptId"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="使用人员">
              <el-select v-model="usePerson" clearable>
                <el-option v-for="item in usePersonList" :key="item.userId" :label="item.nickName"
                  :value="item.userId"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-button size="mini" @click="chgClear">清空</el-button>
        </el-row>

        <el-row>
          <el-col :span="24">
            <div class="div-yj">
              <div>
                <el-table :data="chgList" border>
                  <el-table-column label="序号" align="center" prop="index" :min-width="50" />
                  <el-table-column label="操作" align="center" :min-width="60">
                    <template #default="scope">
                      <div class="box_scope">
                        <img src="../../assets/image/加.png" @click="add" />
                        <img src="../../assets/image/减.png" @click="minus(scope.$index)" />
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column label="选择资产" align="center" prop="xzasset" :min-width="150">
                    <!-- 使用作用域插槽自定义列内容 -->
                    <template slot-scope="scope">
                      <!-- 在作用域插槽内插入文本框 -->
                      <img @click="open2Asset" class="img1" src="../../assets/image/搜索.png" />
                      <el-input :value="scope.row.assetCode"></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column label="资产名称" align="center" prop="assetName" />
                  <el-table-column label="数量" align="center" prop="assetNum" />
                  <el-table-column label="金额" align="center" prop="price" />
                  <el-table-column label="规格" align="center" prop="asseSpec" />
                  <el-table-column label="型号" align="center" prop="model" />
                  <el-table-column label="报废日期" align="center" prop="scrapTime" />
                </el-table>

              </div>
            </div>
          </el-col>
        </el-row>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!--选择资产-->
    <el-dialog :title="title2" :visible.sync="open2" width="1000px" append-to-body>
      <el-row>
        <el-col :span="24">
          <el-input placeholder="资产名称" maxlength="30" style="width: 200px;" v-model="asset.assetName" />&nbsp;
          <el-select placeholder="全部资产类型" v-model="asset.TypeId" clearable>
            <el-option v-for="item in typeList" :key="item.typeId" :label="item.typeName"
              :value="item.typeId"></el-option>
          </el-select>&nbsp;
          <el-select placeholder="全部存放位置" v-model="asset.locationId" clearable>
            <el-option v-for="item in locationList" :key="item.locationId" :label="item.locationName"
              :value="item.locationId"></el-option>
          </el-select>&nbsp;
          <el-button type="primary" icon="el-icon-search" size="mini" @click="open2Asset"
            style="height: 34px;">查询</el-button>
          <p></p>
          <el-table :data="assetList" border style="padding-top: 10px;" @selection-change="assetSelectionChange"
            v-loading="loading1">
            <el-table-column type="selection" width="50" align="center" />
            <el-table-column label="资产名称" align="center" prop="assetName" />
            <el-table-column label="资产编码" align="center" prop="assetCode" :min-width="150" />
            <el-table-column label="资产类型" align="center" prop="typeName" />
            <el-table-column label="规格" align="center" prop="asseSpec" />
            <el-table-column label="型号" align="center" prop="model" />
            <el-table-column label="资产金额(元)" align="center" prop="price" />
            <el-table-column label="报废日期" align="center" prop="scrapTime" />
          </el-table>
        </el-col>
      </el-row>
      <!-- 分页 -->
      <pagination class="fy" v-show="total2>0" :total="total2" :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize" @pagination="getList()" />
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit">确 定</el-button>
        <el-button @click="cancel2">取 消</el-button>
      </div>
    </el-dialog>


    <!-- 单据流水 -->
    <el-dialog :title="title3" :visible.sync="open3" width="620px" append-to-bod>
      <div
        style="width: 500px;height: 50px;border: 1px solid #006eff;margin-left: 50px;padding-left: 10px;background-color: #e6eff4;">
        <p><span>变更单号:&nbsp;</span><span style="font-weight: bold;">{{chgObj.alterationOdd}}</span></p>
      </div>
      <p></p>
      <div>
        <el-timeline>
          <el-timeline-item :timestamp="chgObj.createTime" placement="top" color="blue">
            <span style="font-weight: bold;font-size: 14px;">新增草稿单</span>
            <el-card>
              <h4 style="font-weight: bold;">经办人发起申请</h4>
              <p class="p1"><span>{{chgObj.preparedName}} </span><span>({{chgObj.preparedDeptName}})</span><span
                  style="margin-left: 50px;">账号所属机构名称</span></p>
            </el-card>
          </el-timeline-item>
          <el-timeline-item :timestamp="chgObj.preparedDate" placement="top" :color="auditColor">
            <span style="font-weight: bold;font-size: 14px;">审核</span>
            <el-card>
              <h4 style="font-weight: bold;" v-if="chgObj.receiptsStatus == 1">已同意</h4>
              <h4 style="font-weight: bold;" v-if="chgObj.receiptsStatus == 2">已拒绝</h4>
              <h4 style="font-weight: bold;" v-if="chgObj.receiptsStatus == 3">待审核</h4>
              <h4 style="font-weight: bold;" v-if="chgObj.receiptsStatus == 4">已撤销</h4>
              <div style="width: 450px;height: 40px;border: 1px solid #e7e7e7;background-color: #f0f0f0;padding:8px;">
                意见说明: {{chgObj.auditReason}}
              </div>
              <p class="p1"><span></span>{{chgObj.auditName}}<span>({{chgObj.auditDeptName}})</span><span
                  style="margin-left: 50px;">账号所属机构名称</span></p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
        <el-button @click="cancel3()" style="margin-left: 485px;">取 消</el-button>
      </div>
    </el-dialog>


    <!-- 审核 -->
    <el-dialog :title="title4" :visible.sync="open4" width="620px" append-to-bod>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <div>
          <el-form-item label="审核原因:" prop="nickName" style="height: 100px;">
            <el-input v-model="form.auditReason" type="textarea" maxlength="300" show-word-limit :rows="4"
              style="min-height: 100px;"> </el-input>
          </el-form-item>
        </div>
        <div style="text-align: right;margin-top: 10px;">
          <el-button @click="cancel4">取 消</el-button>
          <el-button type="warning" @click="audit(2)">不通过</el-button>
          <el-button type="primary" @click="audit(1)">通过</el-button>
        </div>
      </el-form>
    </el-dialog>


  </div>
</template>

<script>
  import {
    listH,
    getH,
    delH,
    addH,
    addD,
    updateD,
    updateH,
    getTypeList,
    getusuPersonList,
    getEamList,
    retrunChgStatus
  } from "@/api/eam-xl/assetChange";
  import {
    getInfo
  } from "@/api/login";

  export default {
    name: "assetChange",
    data() {
      return {
        // 遮罩层
        loading: true,
        loading1: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        // 非多个禁用
        multiple: true,
        // 总条数
        total: 0,
        total2: 0,
        // 资产变更表格数据
        hList: [],
        // 弹出层标题
        title: "新增变更单",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 5,
          alterationOdd: null,
          deptId: null
        },
        // 表单参数
        form: {
          assetType: undefined,
          locationId: undefined,
          useDept: undefined,
          usePerson: undefined,
          prepared: undefined,
          alteraContent: undefined,
          creator: undefined,
          auditReason: undefined,
          receiptsStatus: undefined,
          auditPerson: undefined
        },
        // 表单校验
        rules: {
          assetType: [{
            required: true,
            message: "请选择资产类型",
            trigger: "change"
          }, ],
          locationId: [{
            required: true,
            message: "请选择存放位置",
            trigger: "change"
          }, ],
          useDept: [{
            required: true,
            message: "请选择使用部门",
            trigger: "change"
          }, ],
          usePerson: [{
            required: true,
            message: "请选择使用人员",
            trigger: "change"
          }, ]
        },
        open3: false,
        open2: false,
        open4: false,
        title3: "单据流水",
        title2: "选择资产",
        title4: "系统提示",
        auditColor: undefined, //单据流水时间线颜色
        chgList: [{
          index: 1
        }], //领用单集合
        assetList: [], //资产集合
        locationList: [], //存放位置集合
        deptList: [], //部门集合
        typeList: [], //资产类型集合
        usePersonList: [], //使用人员集合
        asset: { //资产
          assetName: undefined,
          TypeId: undefined,
          locationId: undefined
        },
        eamList: [], //资产集合 存放选中的集合
        chgObj: { //变更单对象
          alterationOdd: undefined
        },
        user: {},
        roles: undefined, //权限
        usePerson:undefined,
      };
    },
    created() {
      this.getList();
      getTypeList().then((res) => {
        this.typeList = res.typeList;
        this.locationList = res.locationList;
        this.deptList = res.deptList;
      })
      getInfo().then((res) => {
        this.user = res.user;
        this.roles = res.roles;
      })
    },
    methods: {
      /** 查询资产变更列表 */
      getList() {
        this.loading = true;
        listH(this.queryParams).then(response => {
          this.hList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      // 添加和修改取消按钮
      cancel() {
        this.form = {};
        // listH(this.queryParams).then(response => { //数据初始化
        //   this.hList = response.rows;
        //   this.total = response.total;
        // });
        this.usePerson = null;
        this.open = false;
        this.chgList = [{
          index: 1
        }]; //领用单集合初始化
        this.queryParams.deptId = undefined;
        this.$refs["form"].resetFields();
        this.usePersonList = [];
        this.reset();
      },
      cancel3() {
        this.open3 = false;
        this.auditColor = "";
        this.chgObj = {};
      },
      cancel2() {
        this.open2 = false;
        this.asset = {};
        this.asset.useStatus = 4;
      },
      cancel4() {
        this.open4 = false;
        this.form.auditReason = "";
      },
      // 表单重置
      reset() {
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {

      },
      /** 新增按钮操作 */
      handleAdd() {
        //获取当前登录用户为创建人,制单人
        this.form.creator = this.user.userId;
        this.form.prepared = this.user.userId;
        this.open = true;
        this.title = "添加资产变更";
      },
      queryUsePerson() { //使用部门change绑定事件,按部门查询员工
        this.queryParams.deptId = this.form.useDept;
        this.usePerson = null;
        getusuPersonList(this.queryParams).then(res => {
          this.usePersonList = res.userList;
        })
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        getH(row.alterationId).then(res=>{
          this.queryParams.deptId = res.data.useDept;
          this.chgList = res.data.chgDS;
          getusuPersonList(this.queryParams).then(res1 => {
            this.usePersonList = res1.userList;
            this.usePerson = res.data.usePerson;
          })
          //this.queryUsePerson(); //使用人员
          this.form = res.data;
        })
        this.title = "编辑变更单";
        this.chgList.forEach((item, index) => {
          item.index = index + 1;
        })

        this.open = true;
      },
      /** 提交按钮 */
      submitForm() {
        let _this = this;
        this.form.usePerson= this.usePerson;
        if (this.form.receiptsStatus == null) { //添加
          this.addChg();
        } else { //修改
          if (this.user.userId == this.form.prepared) { //当前登录人为制单人
              if (this.form.receiptsStatus != 3 && this.form.receiptsStatus != 4) {
                this.$message.warning(this.form.alterationOdd + "单号已处理，无法修改");
              } else {
              if (this.form.receiptsStatus == 4) { //状态为撤销
                this.form.receiptsStatus = 3;
              }
              if(this.usePerson == 0){
                this.$message.warning("请选择使用人员");
                return;
              }
              if(this.chgList[0].assetCode == null){
                  this.$message.warning("请选择需要变更的资产");
                  return;
              }
              this.form.useDept = this.queryParams.deptId;
              let deptName = "";
              let typeName = "";
              this.form.useDept = this.queryParams.deptId;
              //备注处理 拼接字段
              this.deptList.forEach((item, index) => {
                if (_this.queryParams.deptId == item.deptId) {
                  deptName = item.deptName;
                }
              })
              this.typeList.forEach((item, index) => {
                if (_this.form.assetType == item.typeId) {
                  typeName = item.typeName;
                }
              })
              this.$refs["form"].validate((valid) => { //添加表单验证
                if (valid) {
                  this.$modal.confirm('确认修改"' + _this.form.alterationOdd + '"变更单号的数据？').then(function() {
                    _this.form.alteraContent = "【资产类型】变更为" + typeName + "；使用部门变更为" + deptName;
                    let obj = new Object();
                    obj.eamChgH = _this.form;
                    obj.eamAssets = _this.chgList;
                    updateD(obj).then(res => {
                      _this.$message.success(res.msg); //修改成功
                      _this.cancel(); //重置数据
                      _this.getList(); //变更单列表初始化
                    });
                  })
                }
              })
              }
          } else {
            this.$message.warning("您没有此权限");
          }

        }

      },
      submit() { //选择资产确定按钮
        let _this = this;
        if (this.eamList.length > 0) {
          if (this.chgList[0].assetCode == null) {
            this.chgList = this.eamList;
          } else {
            if (this.chgList[this.chgList.length - 1].assetCode == null) {
              this.chgList.splice(this.chgList.length - 1, 1);
            }
            this.eamList.forEach((item, index) => {
              this.chgList.push(item);
            })
          }
        }
        this.chgList.forEach((item, index) => {
          item.index = index + 1;
        })
        this.open2 = false;
        this.chgList.forEach((item, index) => {
          this.assetList.forEach((item1, index1) => {
            if (item.assetId == item1.assetId) {
              _this.assetList.splice(index1, 1);
            }
          })

        })
        if (this.chgList.length == 0) {
          this.chgList = [{
            "index": 1
          }];
        }
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        if (this.roles == "common") {
          if (this.user.userId != this.prepared) {
            this.$message.warning("您没有此权限")
            return;
          }
        }
        this.$confirm('是否删除' + row.alterationOdd + "单号", '撤销', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //撤回
          delH(row.alterationId).then((res) => {
            this.$message.success("操作成功");
            this.getList();
          })
        })
      },
      /** 导出按钮操作 */
      handleExport() {
        this.download('eam/eamChange/export', {
          ...this.queryParams
        }, `h_${new Date().getTime()}.xlsx`)
      },
      //单据流水Dialog
      flow(row) {
        if (row.receiptsStatus != 3) {
          this.auditColor = "blue";
        }
        // this.reset();
        this.chgObj = row;
        this.open3 = true;
      },
      add() { //添加一行列表
        if (this.chgList[this.chgList.length - 1].assetCode != null) {
          let chg = new Object();
          chg.index = this.chgList.length + 1;
          this.chgList.push(chg);
        }

      },
      minus(index) { //删除一行列表
        if (this.chgList.length > 1) {
          if (this.chgList[this.chgList.length - 1].assetCode != null) {
            this.assetList.push(this.chgList[index]);
          }
          this.chgList.splice(index, 1);
        }
      },
      open2Asset() { //选择资产弹框 ,搜索图标按钮
        this.open2 = true;
        this.loading1 = true;
        if (this.chgList[0].assetId != null) {
          getEamList(this.asset).then(res => {
            this.assetList = res.rows;
            this.chgList.forEach((item, index) => {
              this.assetList.forEach((item1, index1) => {
                if (item.assetId == item1.assetId) {
                  this.assetList.splice(index1, 1);
                }
              })
            })
            this.loading1 = false;
          })
        } else {
          getEamList(this.asset).then(res => {
            this.assetList = res.rows;
            this.loading1 = false;
          })
        }

      },
      assetSelectionChange(selection) { //选择资产复选框事件
        this.eamList = selection
      },
      chgClear() {
        this.chgList = [{
          index: 1
        }]
        this.loading1 = true;
        getEamList(this.asset).then(res => {
          this.assetList = res.rows;
          this.loading1 = false;
        })
      },
      addChg() { //添加变更单
        let _this = this;
        let deptName = "";
        let typeName = "";
        if(this.usePerson == 0 || this.usePerson == null){
          this.$message.warning("请选择使用人员");
          return;
        }
        if(this.chgList[0].assetCode == null){
            this.$message.warning("请选择需要变更的资产");
            return;
        }
        this.$refs["form"].validate((valid) => { //添加表单验证
          if (valid) {
              _this.form.useDept = _this.queryParams.deptId;
              //备注处理 拼接字段
              _this.deptList.forEach((item, index) => {
                if (_this.queryParams.deptId == item.deptId) {
                  deptName = item.deptName;
                }
              })
              _this.typeList.forEach((item, index) => {
                if (_this.form.assetType == item.typeId) {
                  typeName = item.typeName;
                }
              })
              _this.form.alteraContent = "【资产类型】变更为" + typeName + "；使用部门变更为" + deptName;
              //修改资产
              this.chgList.forEach((item, index) => {
                item.locationId = _this.form.locationId;
                item.typeId = _this.form.assetType;
                item.usePerson = _this.form.usePerson;
                item.useStatus = 100;
              })
              addH(_this.form).then((res) => { //添加领用
                _this.$modal.msgSuccess(res.msg);
                _this.getList();
              }).then(() => { //添加领用从
                addD(_this.chgList);
                _this.cancel();
              })
          }
        });

      },
      hadReturn(row) { //撤回领用单
        //单据状态必须是待审核才可以撤回
        if(this.roles == "common"){
          if(this.user.userId != row.prepared){
            this.$message.warning("您没有此权限");
            return;
          }
        }
        this.$confirm('是否撤回' + row.alterationOdd + "单号", '撤销', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //撤回
          retrunChgStatus(row).then((res) => {
            this.$message.success("操作成功");
            this.getList();
          })
        })

      },
      opneAudit(row) { //打开审核界面dialog
        this.form = row;
        this.open4 = true;
      },
      audit(status) { //审核方法
        this.open4 = false;
        this.form.receiptsStatus = status;
        this.form.auditPerson = this.user.userId;
        updateH(this.form).then(res => {
          this.$message.success(res.msg);
          this.getList();
        })
      }
    }
  };
</script>

<style>
  /* 单据状态 */
  .but1 {
    color: sandybrown;
    border-radius: 30px;
    font-size: 11px;
    background-color: #ffdcbc;
    border: 1px solid sandybrown;
  }

  .but2 {
    color: #aa3800;
    border-radius: 30px;
    font-size: 11px;
    background-color: #ff8d6a;
    border: 1px solid #ff8d6a;
  }

  .but3 {
    color: #4ab0f9;
    border-radius: 30px;
    font-size: 11px;
    background-color: #e6eff4;
    border: 1px solid #4ab0f9;
  }

  .but4 {
    color: #550000;
    border-radius: 30px;
    font-size: 11px;
    background-color: #d1d9dd;
    border: 1px solid #550000;
  }

  /* 单据流水 */
  .img2 {
    height: 15px;
    display: block;
    margin-left: 170px;
    margin-top: -18.5px;
    cursor: pointer;
  }

  /* 搜索图片 */
  .img1 {
    height: 20px;
    position: absolute;
    z-index: 1;
    /* 设置图片的z-index值高于其他元素 */
    right: 15px;
    top: 18px;
    cursor: pointer;
    /* 将鼠标指针设置为手形 */
    transition: background-color 0.3s ease;
    /* 添加过渡效果 */
  }

  /* 入库单的加减图片 */
  .box_scope img {
    width: 18px;
    height: 18px;
    float: left;
    margin-left: 7px;
  }

  .box_scope img:hover {
    cursor: pointer;
  }

  .p1 {
    font-size: 13px;
  }
</style>
